<template>
	<view class="personalData">
		<view class="pd_main">
			<view class="inHeader">
				<view class="inTitle">头像</view>
				<view class="ihImg"><image @click="onUpImg()" :src="headIMG" mode="aspectFill"></image></view>
				<!-- <view class="ihImg"><image @click="onUploadIMG()" :src="headIMG" mode="aspectFill"></image></view> -->
			</view>
			<view class="inName">
				<view class="inTitle">
					<view class="intText">昵称</view>
					<!-- <view class="intMust">
    			必填
    		</view> -->
				</view>
				<view class="inPicker" @click="changeNmae()">
					<view class="picker">
						<text class="inBase text">{{ name }}</text>
						<image class="inDown" src="../../../static/xs_icon/right3.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
			<view class="inName">
				<view class="inTitle">
					<view class="intText">性别</view>
					<!-- <view class="intMust">
    			必填
    		</view> -->
				</view>
				<view class="inPicker" @click="changeSex()">
					<view class="picker">
						<text class="inBase text">{{ sex }}</text>
						<image class="inDown" src="../../../static/xs_icon/right3.png" mode="widthFix"></image>
					</view>
					<!-- <picker class="picker" @change="pickerSex" :value="indexSex" :range="gender" range-key="sex">
					<view class="inBase" :class="{ hover: indexSex != 0 }">{{ gender[indexSex].sex }}</view>
					<image class="inDown" src="../../../static/xs_icon/right3.png" mode="widthFix"></image>
				</picker> -->
				</view>
			</view>
			<view class="inName">
				<view class="inTitle"><view class="intText">手机号</view></view>
				<view class="inPicker">
					<view class="picker">
						<text class="inBase text">{{ phone }}</text>
						<image class="inDown" src="../../../static/xs_icon/right3.png" mode="widthFix"></image>
					</view>
					<!-- <picker class="picker" @change="pickerSex" :value="indexSex" :range="gender" range-key="sex">
	      <view class="inBase" :class="{ hover: indexSex != 0 }">{{ gender[indexSex].sex }}</view>
	      <image class="inDown" src="../../../static/xs_icon/right3.png" mode="widthFix"></image>
	    </picker> -->
				</view>
			</view>
		</view>

		<!-- 立即支付 -->
		<!-- <view class="login-btn-wrapper">
			<button class="login-btn" @click="confirm()">确 认</button>
		</view> -->
	</view>
</template>

<script>
import { UPLOAD_IMAGE_URL } from '@/common/config.js';
import { mapState, mapMutations } from 'vuex';
import { UploadFileToOSS } from '@/common/utils/index.js';
export default {
	data() {
		return {
			headIMG: '../../../static/imges/headImg1.gif',
			name: '小帅',
			sex: '',
			sexCode: '',
			phone: '',
			// typeList:[{id:'',tag_name:'机构名称'}],
			// indexType:0,		// 类别索引
			userInfo: {},
			institution: []
		};
	},
	onLoad() {
		/**
		 * @description 监听监听上传头像事件
		 */
		uni.$on('uPicCropper', path => {
			this.headIMG = path;
			// console.log(path)
			this.onUploadIMG(path);
		});
	},
	onShow() {
		this.into();
	},
	created() {
		// console.log(this.letterList.length)
	},
	methods: {
		// ...mapMutations(['getUserInfo']),
		into() {
			this.userInfo = uni.getStorageSync('USER_INFO');
			console.log(this.userInfo);
			this.name = this.userInfo.user_nickname;
			// 性别 0未知 1男 2女
			this.sexCode = this.userInfo.sex;
			this.sex = this.userInfo.sex == 0 ? '未知' : this.userInfo.sex == 1 ? '男' : '女';
			this.headIMG = this.userInfo.head_img;
			this.phone = this.userInfo.mobile;
			// console.log(this.userInfo.sex);
			// for (let i in this.gender) {
			//   if (this.userInfo.sex == this.gender[i].id) {
			//     this.indexSex = i;
			//   }
			// }

			// this.getPersonalData(userInfo);
		},
		// 获取个人信息
		getPersonalData(userInfo) {
			this.$api
				.post(global.apiUrls.getPersonalData, {
					user_id: userInfo.id
				})
				.then(res => {
					const user = res.data.data;
					console.log(user);
					if (res.data.code == 1) {
						this.name = user.user_name;
						// for (let i in this.age) {
						// 	if (this.age[i] == user.age) {
						// 		this.indexAge = i;
						// 	}
						// }
					}
				})
				.catch(err => {
					// this.$popup.showToast('保存失败')
				});
		},
		/**
		 * @event
		 * @description 选择头像事件
		 */
		onUpImg() {
			let that = this;
			uni.showActionSheet({
				itemList: ['拍照', '从手机相册选择'],
				success: function(res) {
					console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
					if (res.tapIndex == 0) {
						uni.chooseImage({
							count: 1,
							sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
							sourceType: ['camera'], // 可以指定来源是相册还是相机，默认二者都有
							success: res => {
								// 跳转到图片裁切页面
								uni.navigateTo({
									url: './avatar-cropping/index?rectHeight=200&rectWidth=200&fileType="jpg"&myImgUrl=' + res.tempFilePaths[0],
									animationDuration: 0
								});
							}
						});
					} else {
						uni.chooseImage({
							count: 1,
							sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
							sourceType: ['album'], // 可以指定来源是相册还是相机，默认二者都有
							success: res => {
								console.log(res);
								// 跳转到图片裁切页面
								uni.navigateTo({
									url: './avatar-cropping/index?rectHeight=200&rectWidth=200&fileType="jpg"&myImgUrl=' + res.tempFilePaths[0],
									animationDuration: 0
								});
							}
						});
					}
				},
				fail: function(res) {
					console.log(res.errMsg);
				}
			});
			/* uni.chooseImage({
		         count: 1,
		         sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
		         sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
		         success: res => {
		           // 跳转到图片裁切页面
		           uni.navigateTo({
		             url: '/pages/user/user/avatar-cropping/index?rectHeight=200&rectWidth=200&fileType="jpg"&myImgUrl=' +
		               res.tempFilePaths[0],
		             animationDuration: 0
		           })
		         }
		       });
		*/
		},
		//  头像裁切
		// onUpImg() {
		// 	console.log('裁切');
		// 	this.$u.route({
		// 		// 关于此路径，请见下方"注意事项"
		// 		url: '/uview-ui/components/u-avatar-cropper/u-avatar-cropper',
		// 		// 内部已设置以下默认参数值，可不传这些参数
		// 		params: {
		// 			// 输出图片宽度，高等于宽，单位px
		// 			destWidth: 300,
		// 			// 裁剪框宽度，高等于宽，单位px
		// 			rectWidth: 200,
		// 			// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
		// 			fileType: 'jpg'
		// 		}
		// 	});
		// },

		// 上传图片
		onUploadIMG(path) {
			console.log(path);
			uni.uploadFile({
				url: UPLOAD_IMAGE_URL, //仅为示例，非真实的接口地址
				filePath: path,
				name: 'file',
				success: uploadFileRes => {
					// uni.hideLoading();
					console.log(JSON.parse(uploadFileRes.data).data[0].path);
					this.headIMG = JSON.parse(uploadFileRes.data).data[0].path;
					this.modifyPersonalData();
				}
			});
		},
		// 修改个人信息
		modifyPersonalData() {
			const { headIMG, sexCode, name } = this;
			const data = { sex: sexCode, head_img: headIMG, user_nickname: name };
			this.$api
				.post(global.apiUrls.modifyPersonalData, data)
				.then(res => {
					const user = res.data.data;
					console.log(user);
					if (res.data.code == 1) {
						uni.setStorageSync('USER_INFO', user.userinfo);
					}
				})
				.catch(err => {
					// this.$popup.showToast('保存失败')
				});
		},
		// 修改名字
		changeNmae() {
			uni.navigateTo({
				url: './changeName?name=' + this.name
			});
		},
		// 修改性别
		changeSex(e) {
			uni.navigateTo({
				url: './changeSex?sexCode=' + this.sexCode
			});
		},
		// 年龄
		pickerAge(e) {
			this.indexAge = e.target.value;
		},
		// 类型
		onTag_name() {
			// console.log(this.institution)
			uni.navigateTo({
				url: '../../webview/webview?url=' + this.institution.institutions_url
			});
		},
		// 确认
		confirm() {
			console.log('确认');
			const { headIMG, name, indexSex, indexAge } = this;
			// if (indexSex == 0 || indexAge == 0) return this.$popup.showToast('请填写完整信息', 2000);
			this.$popup.showLoading();
			const data = {
				head_img: headIMG,
				user_nickname: name.replace(/\s*/g, ''),
				sex: indexSex,
				age: indexAge,
				user_id: this.userInfo.id
			};
			// console.log(data);
			this.changePersonalData(data);
		},
		changePersonalData(data) {
			this.$api
				.post(global.apiUrls.my.changePersonalData, data)
				.then(res => {
					console.log(res);
					uni.hideLoading();
					this.$popup.showToast(res.data.msg, 2000);
					if (res.data.code == 1) {
						setTimeout(() => {
							this.getUserInfo(res.data.data.userinfo);
							uni.setStorageSync('USER_INFO', res.data.data.userinfo);
							uni.navigateBack();
						}, 2000);
					}
				})
				.catch(err => {
					// this.$popup.showToast('保存失败')
				});
		}
	}
};
</script>

<style lang="scss">
@import './personalData.scss';
</style>
